<template>
	<statusbar-item :tooltip="tooltip" @click="switchColorScheme()" :content-center="false" tooltip-unselect>
		<div class="color-scheme-box" :class="{ active: isDark }">
			<i class="iconfont icon-statusbar-moon center"></i>
			<i class="iconfont icon-statusbar-taiyang center"></i>
		</div>
	</statusbar-item>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRootStore } from '@v/store';
import statusbarItem from '@v/components/statusbar/statusbarItem/index.vue';

const store = useRootStore();

const tooltip = ref('');
const isDark = ref(false);

function setData() {
	switch (store.colorScheme) {
		case 'dark':
			tooltip.value = '深色模式';
			isDark.value = false;
			break;
		case 'light':
			tooltip.value = '浅色模式';
			isDark.value = true;
			break;
	}
}

function switchColorScheme() {
	switch (store.colorScheme) {
		case 'dark':
			store.setColorScheme('light');
			break;
		case 'light':
			store.setColorScheme('dark');
			break;
	}

	setData();
}

setData();
</script>

<style scoped lang="scss">
.color-scheme-box {
	height: 200%;
	transition: 0.3s;
	transform: translateY(0);
	&.active {
		transform: translateY(-50%);
	}
	& > .iconfont {
		height: 50%;
	}
	:deep(.active > .icon-yuyinguanbi) {
		color: var(--theme-danger-color);
	}
}
</style>
